<template>
  <div class="container">
    <div class="main">
      <!-- 列表  -->
      <div class="main-right">
        <div class="right-title">{{ state.main.right.title }}</div>
        <div class="right-content" ref="myTable">
          <!-- :style="{ color: idx === 0 || item.inout === 2 ? '#F39752' : '#F5F5F5' }" -->
          <div class="people" v-for="(item, idx) in state.inouts">
            <div class="avater">
              <img :src="Avater" alt="" />
            </div>
            <div
              class="info"
              :style="{
                color:
                  idx === 0 && item.inout === 2
                    ? '#F39752'
                    : idx === 0 && item.inout === 1
                    ? '#00C1DE'
                    : '#F5F5F5',
              }"
            >
              <div class="name">
                {{ item.name }}
                {{ moment(item.timeStamp).format("YYYY-MM-DD HH:mm:ss") }}
              </div>
            </div>
            <div
              class="status"
              :style="{
                color:
                  idx === 0 && item.inout === 2
                    ? '#F39752'
                    : idx === 0 && item.inout === 1
                    ? '#00C1DE'
                    : '#F5F5F5',
              }"
            >
              <!-- <img :src="item.inout === 1 ? InMeeting : OutMeeting" alt=""> -->
              {{ item.inout === 1 ? "入场" : "离场" }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { markRaw, nextTick, onMounted, reactive, ref } from "vue";
// import LeftWarp from '@/assets/header/left-warp.png'
// import LeftPic from '@/assets/header/left.png'
// import RightWarp from '@/assets/header/right-warp.png'
// import RightPic from '@/assets/header/right.png'
import Avater from "@/assets/content/avater.png";
import InMeeting from "@/assets/content/inmeeting.png";

import OutMeeting from "@/assets/content/outmeeting.png";
import * as echarts from "echarts";
import moment from "moment";
import { useGetInfoApi } from "@/api/demo";

import getUrlParams from "@/utils/getParams.ts";

const chart1Ref = ref();
const chart2Ref = ref();
// const chartsChild2Ref = ref()
const state = reactive({
  header: {
    title: "会议动态",
    left: {
      title: "正常人数",
      number: undefined,
    },
    right: {
      title: "异常人数",
      number: undefined,
    },
  },
  main: {
    time: moment().format("YYYY年MM月DD日 HH:mm:ss"),
    title: "参会人数展示",
    charts: {
      title1: "在场人数",
      title2: "离场人数",
      title3: "在场",
      title4: "离开",
      title5: "空闲",
      myCharts: [] as any,
      data1: undefined as any,
      data2: undefined as any,
    },
    right: {
      title: "会议人员实时出入",
    },
  },
  left: [],
  right: [],
  inouts: [],
  idle: 0,
  inSeat: undefined,
  outSeat: undefined,
  leftMap: new Map(),
  rightMap: new Map(),
});

setInterval(() => {
  state.main.time = moment().format("YYYY年MM月DD日 HH:mm:ss");
}, 1000);

const initChart1 = (data) => {
  state.main.charts.data1 = markRaw(echarts.init(chart1Ref.value));
  var value = data;
  const option = {
    backgroundColor: "000",
    title: {
      text: `${value}人`,
      subtext: "在场人数",
      left: "center",
      top: "center", //top待调整
      textStyle: {
        color: "#fff",
        fontSize: 54,
        fontFamily: "DINAlternate-Bold",
      },
      subtextStyle: {
        color: "#ff",
        fontSize: 30,
        fontFamily: "PingFangSC-Regular",
        top: "center",
      },
      itemGap: 2, //主副标题间距
    },
    xAxis: {
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      // data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    yAxis: {
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    series: [
      // 内圆
      // {
      //   type: 'pie',
      //   radius: ['0', '50%'],
      //   center: ['50%', '50%'],
      //   z: 0,
      //   itemStyle: {
      //     normal: {
      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      //         offset: 0,
      //         color: '#1147A1'
      //       },
      //       {
      //         offset: 0.5,
      //         color: '#423DB3'
      //       },
      //       {
      //         offset: 1,
      //         color: '#1147A1'
      //       }
      //       ]),
      //       label: {
      //         show: false
      //       },
      //       labelLine: {
      //         show: false
      //       }
      //     },
      //   },
      //   label: {
      //     normal: {
      //       position: "center",

      //     }
      //   },
      //   data: [100],
      // },
      // 进度圈
      {
        type: "pie",
        radius: ["50%", "52%"],
        data: [
          {
            value: value,
            itemStyle: {
              normal: {
                borderWidth: 26,
                borderRadius: 0,
                borderColor: {
                  colorStops: [
                    {
                      offset: 0,
                      color: "#376CCB", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#27DEF7", // 100% 处的颜色
                    },
                  ],
                },
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
          },
          {
            name: "gap",

            value: 288 - value,
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          },
        ],
      },
      //刻度尺
      {
        // name: "白色圈刻度",
        type: "gauge",
        radius: "67%",
        startAngle: 225, //刻度起始
        endAngle: -134.8, //刻度结束
        z: 4,
        axisTick: {
          show: true,
          lineStyle: {
            width: 2,
            color: "rgba(1,244,255, 0.9)",
          },
        },
        splitLine: {
          length: 16, //刻度节点线长度
          lineStyle: {
            width: 2,
            color: "rgba(1,244,255, 0.9)",
          }, //刻度节点线
        },
        axisLabel: {
          color: "rgba(255,255,255,0)",
          fontSize: 12,
        }, //刻度节点文字颜色
        pointer: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            opacity: 0,
          },
        },
        detail: {
          show: false,
        },
        data: [
          {
            value: 0,
            name: "",
          },
        ],
      },
      // 刻度圈
      {
        type: "pie",
        radius: ["0%", "73%"],
        center: ["50%", "50%"],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: "center",
          },
          emphasis: {
            show: false,
            textStyle: {
              fontWeight: "bold",
            },
          },
        },
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0.05,
                  color: "rgba(32,36,107, 0.2)",
                },
                {
                  offset: 0.5,
                  color: "rgba(32,36,107,0.3)",
                },
                {
                  offset: 0.95,
                  color: "rgba(32,36,107, 0.2)",
                },
              ],
            },
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: 3235,
          },
        ],
      },
    ],
  };
  state.main.charts.data1.setOption(option);
  state.main.charts.myCharts.push(state.main.charts.data1);
};
const initChart2 = (data) => {
  state.main.charts.data2 = markRaw(echarts.init(chart2Ref.value));
  var value = data;
  const option = {
    backgroundColor: "000",
    title: {
      text: `${value}人`,
      subtext: "离场人数",
      left: "center",
      top: "center", //top待调整
      textStyle: {
        color: "#fff",
        fontSize: 54,
        fontFamily: "DINAlternate-Bold",
      },
      subtextStyle: {
        color: "#ff",
        fontSize: 30,
        fontFamily: "PingFangSC-Regular",
        top: "center",
      },
      itemGap: 2, //主副标题间距
    },
    xAxis: {
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      // data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    yAxis: {
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    series: [
      // 内圆
      // {
      //   type: 'pie',
      //   radius: ['0', '50%'],
      //   center: ['50%', '50%'],
      //   z: 0,
      //   itemStyle: {
      //     normal: {
      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      //         offset: 0,
      //         color: '#1147A1'
      //       },
      //       {
      //         offset: 0.5,
      //         color: '#423DB3'
      //       },
      //       {
      //         offset: 1,
      //         color: '#1147A1'
      //       }
      //       ]),
      //       label: {
      //         show: false
      //       },
      //       labelLine: {
      //         show: false
      //       }
      //     },
      //   },
      //   label: {
      //     normal: {
      //       position: "center",

      //     }
      //   },
      //   data: [100],
      // },
      // 进度圈
      {
        type: "pie",
        radius: ["50%", "52%"],
        data: [
          {
            value: value,
            itemStyle: {
              normal: {
                borderWidth: 26,
                borderColor: {
                  colorStops: [
                    {
                      offset: 0,
                      color: "#376CCB" || "#00cefc", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#27DEF7" || "#367bec", // 100% 处的颜色
                    },
                  ],
                },
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
          },
          {
            name: "gap",
            value: 288 - value,
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          },
        ],
      },
      //刻度尺
      {
        // name: "白色圈刻度",
        type: "gauge",
        radius: "67%",
        startAngle: 225, //刻度起始
        endAngle: -134.8, //刻度结束
        z: 4,
        axisTick: {
          show: true,
          lineStyle: {
            width: 2,
            color: "rgba(1,244,255, 0.9)",
          },
        },
        splitLine: {
          length: 16, //刻度节点线长度
          lineStyle: {
            width: 2,
            color: "rgba(1,244,255, 0.9)",
          }, //刻度节点线
        },
        axisLabel: {
          color: "rgba(255,255,255,0)",
          fontSize: 12,
        }, //刻度节点文字颜色
        pointer: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            opacity: 0,
          },
        },
        detail: {
          show: false,
        },
        data: [
          {
            value: 0,
            name: "",
          },
        ],
      },
      // 刻度圈
      {
        type: "pie",
        radius: ["0%", "73%"],
        center: ["50%", "50%"],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: "center",
          },
          emphasis: {
            show: false,
            textStyle: {
              fontWeight: "bold",
            },
          },
        },
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0.05,
                  color: "rgba(32,36,107, 0.2)",
                },
                {
                  offset: 0.5,
                  color: "rgba(32,36,107,0.3)",
                },
                {
                  offset: 0.95,
                  color: "rgba(32,36,107, 0.2)",
                },
              ],
            },
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: 3235,
          },
        ],
      },
    ],
  };
  state.main.charts.data2.setOption(option);
  state.main.charts.myCharts.push(state.main.charts.data2);
};
const getRow = (index: any) => {
  if (~~(index / 12) === 1 && index <= 12) return ~~(index / 12);

  if (~~(index % 12) === 0) {
    return ~~(index / 12);
  }
  return ~~(index / 12) + 1;
};

const getCol = (index: any) => {
  if (index % 12 === 0) return 12;
  return index % 12;
};

const getrightCol = (index: any) => {
  if (index % 24 === 0) return 24;
  return (index % 24) + 12;
};

// 批量设置 echarts resize
const initEchartsResizeFun = () => {
  nextTick(() => {
    for (let i = 0; i < state.main.charts.myCharts.length; i++) {
      setTimeout(() => {
        state.main.charts.myCharts[i].resize();
      }, i * 1000);
    }
  });
};
// 批量设置 echarts resize
const initEchartsResize = () => {
  window.addEventListener("resize", initEchartsResizeFun);
};

let timer = null;
let myTable = ref(null);

const clearScroll = () => {
  clearInterval(timer);
  timer = null;
};

const createScroll = () => {
  clearScroll();
  const table = myTable.value;

  timer = setInterval(() => {
    table.scrollTop += 1; //滚动高度+1
    console.log(table.clientHeight, table.scrollTop, table.scrollHeight);
    if (table.clientHeight + table.scrollTop == table.scrollHeight) {
      table.scrollTop = 0;
    }
  }, 100);
};

const getInfo = (code: string) => {
  useGetInfoApi({ code }).then(({ content }: any) => {
    state.header.left.number = content.normalNum;
    state.header.right.number = content.errorNum;
    state.inouts =
      content.inouts.map((item) => {
        return {
          ...item,
          inout: 2,
        };
      }) || [];
    content.position = content.position || [];
    state.inSeat = content.position.reduce((acc, curr) => {
      return curr.status === 1 ? acc + 1 : acc;
    }, 0);
    state.outSeat = content.position.reduce((acc, curr) => {
      return curr.status === 2 ? acc + 1 : acc;
    }, 0);
    // initChart1(state.inSeat)
    // initChart2(state.outSeat)
    console.log(state.inSeat, state.outSeat);

    state.leftMap.clear();
    state.rightMap.clear();
    state.left = content.position.filter((item) => {
      return item.col <= 12;
    });
    state.right = content.position.filter((item) => {
      return item.col > 12;
    });
    state.left.forEach((item) => {
      state.leftMap.set(item.row + "_" + item.col, item);
    });
    state.right.forEach((item) => {
      state.rightMap.set(item.row + "_" + item.col, item);
    });
    console.log(state.leftMap);
    console.log(state.rightMap);
  });
};

setInterval(() => {
  const code = getUrlParams(window.location.href);
  getInfo(code);
}, 5000);

onMounted(() => {
  const code = getUrlParams(window.location.href);
  getInfo(code);
  // createScroll()
  initEchartsResize();
});
</script>

<style scoped lang="scss">
.container {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/warp.png");
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;

  .header {
    height: 220px;
    width: 100%;
    box-sizing: border-box;
    background-image: url("@/assets/Group 137.png");
    background-size: 100% 100%;
    display: flex;
    position: relative;

    .header-info {
      display: flex;
      align-items: center;
      margin-left: 200px;

      .info-item {
        display: flex;
        margin-right: 40px;

        .left {
          display: flex;
          flex-direction: column;
          color: #fff;
          align-items: center;

          .left-title {
            font-size: 28px;
          }

          .left-number {
            font-size: 32px;
          }
        }

        .right {
          .right-picwarp {
            position: relative;
            margin-left: 15px;

            .right-pic {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
      }
    }

    .header-title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-size: 64px;
    }
  }

  .main {
    display: flex;
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 10px;
    box-sizing: border-box;
    flex: 1;

    .left {
      flex: 6;
      display: flex;
      flex-direction: column;

      .warp {
        flex: 4;
        background-color: rgba(19, 12, 33, 0.98);
        border-radius: 16px;
        display: flex;
        flex-direction: column;

        .head {
          display: flex;
          color: #fff;
          font-size: 38px;
          justify-content: center;
          padding-bottom: 20px;
          position: relative;

          .left-time {
            position: absolute;
            right: 40px;
            top: 50%;
            transform: translate(0%, -50%);
          }
        }

        .left-content {
          flex: 1;
          display: flex;
          justify-content: space-between;
          padding: 10px 20px 20px 0;

          .seat {
            width: calc(100% / 12.5);
            height: calc(100% / 12.7);
            margin-bottom: 5px;
            color: #fff;
            // background-color: rgb(42, 204, 240);
            border-radius: 8px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }

          .seat-left {
            width: 49%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: start;
            // background-color: #52f02a;
            border-radius: 4px;

            .content-warp {
              .name {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                color: white;
                font-size: 37px;
                font-weight: 800;
                background: #141984;
              }
            }

            .content-warp {
              .name {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                color: white;
                font-size: 37px;
                font-weight: 800;
                background: #141984;
              }
            }

            .img-warp {
              display: flex;
              justify-content: center;

              img {
                width: 50px;
                height: 50px;
              }
            }

            .leave {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 100%;
              color: yellow;
              font-size: 37px;
              font-weight: 800;
              background: #80211d;

              //background: url('@/assets/content/icon-2.png') no-repeat;
              //background-size: 100% 100%;
            }

            .idle {
              width: 100%;
              height: 100%;
              // background: url('@/assets/content/icon-3.png') no-repeat;
              // background-size: 100% 100%;
              background-color: #80211d;
            }
          }

          .seat-right {
            width: 49%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: start;
            // background-color: #a4f02a;
            border-radius: 4px;

            .img-warp {
              display: flex;
              align-items: center;

              img {
                width: 50px;
                height: 50px;
              }
            }

            .leave {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 100%;
              color: yellow;
              font-size: 37px;
              font-weight: 800;
              background: #80211d;
            }

            .idle {
              width: 100%;
              height: 100%;
              // background: url('@/assets/content/icon-3.png') no-repeat;
              // background-size: 100% 100%;
              background-color: #80211d;
            }
          }
        }
      }

      .left-charts {
        flex: 1;
        display: flex;
        padding: 0 40px 0 20px;

        .chart1 {
          flex: 2;
        }

        .chart2 {
          flex: 2;
        }

        .icon {
          flex: 3;
          display: flex;
          justify-content: space-around;
          align-items: center;
          background-color: rgba(13, 13, 49, 1);
          color: #fff;
          font-size: 36px;

          img {
            width: 140px;
            height: auto;
          }

          .icon-warp {
            display: flex;
            flex-direction: column;
            align-items: center;
          }
        }
      }
    }

    .main-right {
      flex: 1;
      color: #fff;
      background-color: rgba(13, 13, 49, 1);
      border-radius: 16px;
      padding-top: 40px;
      display: flex;
      flex-direction: column;

      .right-title {
        font-size: 120px;
      }

      .right-content {
        padding: 10px;
        flex: 1;
        overflow-y: scroll;

        .people {
          padding-right: 20px;
          display: flex;
          align-items: center;
          font-size: 70px;
          margin-bottom: 8px;

          &:nth-of-type(1) {
            /* color: #00C1DE !important; */
            font-size: 136px;
          }

          .avater {
            display: flex;
            align-items: center;

            img {
              width: auto;
              height: 136px;
            }
          }

          .info {
            display: flex;
            padding: 0 10px;
            justify-content: space-between;
          }

          .status {
            display: flex;
            align-items: center;
            margin-left: 100px;
            img {
              width: 44px;
              height: 44px;
            }
          }
        }
      }
    }
  }
}

.bix {
  color: #141984;
  color: #80211d;
}
</style>
